<template>
  <div class="page-container" v-loading="loading">
    <div class="page-content">
      <div class="panel-container">
        <div class="panel-content">
          <div class="panel-item">
            <div class="label">信息标题:</div>
            <div class="value" v-if="detail">{{ detail.title }}</div>
            <el-tag style="margin-left: 10px">{{ showSts }}</el-tag>
          </div>
          <div class="panel-item">
            <div class="label">数量:</div>
            <div class="value" v-if="detail">{{ detail.vol }}{{ detail.unit }}</div>
          </div>
          <div class="panel-item">
            <div class="label">估值:</div>
            <div class="value" v-if="detail">{{ showValuation }}</div>
          </div>
          <div class="panel-item">
            <div class="label">所在地:</div>
            <div class="value" v-if="detail">{{ getAddress(detail.sheng_id, detail.shi_id, detail.zone_id) }}</div>
          </div>
          <div class="panel-item">
            <div class="label">价值等级:</div>
            <div class="value" v-if="detail">{{ showValue }}</div>
          </div>
          <div class="panel-item">
            <div class="label">所属分类:</div>
            <div class="value" v-if="detail">{{ detail.cate_name }}</div>
          </div>
          <div class="panel-item">
            <div class="label">标签:</div>
            <div class="value" v-if="detail">
              <el-tag type="info" v-for="(item, index) in showKeywords" :key="item + index">{{ item }}</el-tag>
            </div>
          </div>
          <br />
          <div class="panel-item">
            <div class="label">信息图片:</div>
            <div class="value" v-if="detail && detail.images">
              <viewer :images="showImages" class="img-box" ref="viewer" :options="viewerOptions">
                <img v-for="item in showImages" :key="item" :src="item" class="img" />
              </viewer>
            </div>
          </div>
          <div class="panel-item">
            <div class="label">15s短视频:</div>
            <div class="value" v-if="detail">
              <div class="video-box" v-if="detail.video_url">
                <video width="100%" height="100%" @click="handleVideoClick" id="Video">
                  <source :src="detail.video_url" type="video/mp4" />
                </video>
              </div>
            </div>
          </div>
          <div class="panel-item">
            <div class="label">信息介绍:</div>
            <div class="value tinymce-content" v-if="detail" v-html="detail.desc"></div>
          </div>
          <div class="panel-bg">
            <div class="sub-title">
              联系人信息
              <span class="desc">(仅发布人及当前申领人可见)</span>
            </div>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <div class="panel-item">
                  <div class="label">联系人手机号:</div>
                  <div class="value" v-if="detail">{{ getPhones() }}</div>
                </div>
              </el-col>
              <el-col :xl="6" :lg="12">
                <div class="panel-item">
                  <div class="label">处置周期:</div>
                  <div class="value" v-if="detail">{{ showCycle }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <div class="panel-item">
                  <div class="label">姓名:</div>
                  <div class="value" v-if="detail">{{ detail.user_name }}</div>
                </div>
              </el-col>
              <el-col :xl="6" :lg="12">
                <div class="panel-item">
                  <div class="label">公司名称:</div>
                  <div class="value" v-if="detail">{{ detail.company_name }}</div>
                </div>
              </el-col>
              <el-col :xl="6" :lg="12">
                <div class="panel-item">
                  <div class="label">公司地址:</div>
                  <div class="value" v-if="detail">{{ getAddress(detail.com_sheng_id, detail.com_shi_id, detail.com_zone_id) }}</div>
                </div>
              </el-col>
              <el-col :xl="6" :lg="12">
                <div class="panel-item">
                  <div class="label">详细地址:</div>
                  <div class="value" v-if="detail">{{ detail.com_address }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="panel-item">
                  <div class="label">所属行业:</div>
                  <div class="value" v-if="detail">{{ detail.industry }}</div>
                </div>
              </el-col>
              <el-col :span="18">
                <div class="panel-item">
                  <div class="label">备注:</div>
                  <div class="value" v-if="detail">{{ detail.remark }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!--数据信息-->
      <div class="panel-container no-margin">
        <div class="panel-title">操作记录</div>
        <el-table stripe :data="operation.dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table1" style="width: 100%" v-loading="operation.dataListLoading">
          <af-table-column align="center" header-align="center" show-overflow-tooltip label="操作时间" prop="created_time"></af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip label="操作人" prop="man_name"></af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip label="操作" prop="action"></af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip label="内容" prop="action_desc"></af-table-column>
        </el-table>
        <el-pagination
          small
          background
          :current-page="operation.pageNumber"
          :page-size="operation.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="operation.pageTotal"
          @current-change="currentChangeHandleOperation"
          @size-change="sizeChangeHandleOperation"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
        ></el-pagination>
        <div class="panel-title">会员行为记录</div>
        <el-table stripe :data="view.dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table2" style="width: 100%" v-loading="view.dataListLoading">
          <af-table-column align="center" header-align="center" show-overflow-tooltip label="操作时间" prop="created_time"></af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip label="操作人" prop="vip_name">
            <template slot-scope="scope">
              <el-popover placement="top-start" width="500" trigger="hover">
                <div class="tag-list">
                  <el-tag v-for="item in scope.row.tagList" :key="item.code">{{ item.name }}:{{ item.score }}</el-tag>
                  <el-tag type="warning" v-for="item in scope.row.cityTagList" :key="item.code">{{ item.name }}:{{ item.socre }}</el-tag>
                </div>
                <span style="cursor: pointer" slot="reference">{{ scope.row.vip_name }}</span>
              </el-popover>
            </template>
          </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip label="行为" prop="action_desc"></af-table-column>
        </el-table>
        <el-pagination
          small
          background
          :current-page="view.pageNumber"
          :page-size="view.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="view.pageTotal"
          @current-change="currentChangeHandleView"
          @size-change="sizeChangeHandleView"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
        ></el-pagination>
      </div>
      <div class="fixed-container">
        <div class="fixed-content">
          <div class="panel-container">
            <div class="panel-content">
              <div class="panel-line flex-center">
                <el-button type="info" @click="handleClose" size="mini">关闭</el-button>
                <template v-if="detail && (detail.sts === 1 || detail.sts === 2 || detail.sts === 4)">
                  <el-button type="primary" @click="handleEdit" size="mini">编辑</el-button>
                </template>
                <!-- <template v-if="detail && (detail.sts === 1 || detail.sts === 2 || detail.sts === 4) && parseInt(detail.is_open) === 0">
                  <el-button type="warning" @click="handlePublic" size="mini">公开</el-button>
                </template>
                <template v-else>
                  <el-button type="warning" size="mini" disabled>已公开</el-button>
                </template> -->
                <template v-if="detail && detail.sts === 2">
                  <el-button type="primary" @click="handleDeal" size="mini">确认成交</el-button>
                  <el-button type="danger" @click="handleNotDeal" size="mini">未成交</el-button>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  确认成交 -->
    <el-dialog title="确认成交" :visible.sync="showDialogDeal">
      <DialogDeal v-if="showDialogDeal" :id="queryId" @close="showDialogDeal = false" @success="handleDealSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import { apiAssetBaseInfo } from '@/api/assetsPublic'
import { apiNoShareDetail, apiNoShareRecordList, apiNoSharePub, apiNoShareUserRecord, apiNoShareDealConfirm, apiCrmCustomerCityList, apiCrmCustomerMarkList } from '@/api/assetsAlone'
import DialogDeal from './components/DialogDeal.vue'

export default {
  name: 'AloneDetail',
  components: { DialogDeal },
  data() {
    return {
      showDialogDeal: false,
      stsList: [
        { value: 1, label: '推送中' },
        { value: 4, label: '推送完毕' },
        { value: 2, label: '成交待核实' },
        { value: 3, label: '已成交' },
      ],
      loading: false,
      detail: null,
      operation: {
        dataList: [],
        pageNumber: 1,
        pageSize: 10,
        pageTotal: 0,
        dataListLoading: false,
      },
      view: {
        dataList: [],
        pageNumber: 1,
        pageSize: 10,
        pageTotal: 0,
        dataListLoading: false,
      },
      viewerOptions: {
        button: true,
        navbar: false,
        title: true,
        toolbar: false,
        tooltip: false,
        movable: false,
        zoomable: true,
        rotatable: false,
        scalable: true,
        transition: false,
        fullscreen: false,
        keyboard: true,
      },
      cateList: [],
      areaList: [],
      valuationList: [],
      valueList: [
        {
          label: '低',
          value: 1,
        },
        {
          label: '中',
          value: 2,
        },
        {
          label: '高',
          value: 3,
        },
      ],
      cycleList: [
        {
          label: '一次性',
          value: 1,
        },
        {
          label: '长期-月',
          value: 2,
        },
        {
          label: '长期-季度',
          value: 3,
        },
        {
          label: '长期-年',
          value: 4,
        },
      ],
      vipIdList: [],
    }
  },
  computed: {
    showSts() {
      if (!this.detail || !this.stsList) {
        return
      }
      const item = this.stsList.find((item) => item.value === this.detail.sts)
      if (item) {
        return item.label
      } else {
        return ''
      }
    },
    showValue() {
      if (!this.detail || !this.valueList) {
        return
      }
      const item = this.valueList.find((item) => item.value === this.detail.value)
      if (item) {
        return item.label
      } else {
        return ''
      }
    },
    showValuation() {
      if (!this.detail || !this.valuationList) {
        return
      }
      const item = this.valuationList.find((item) => item.value === this.detail.valuation)
      if (item) {
        return item.key
      } else {
        return ''
      }
    },
    showCate() {
      if (!this.detail || !this.cateList) {
        return
      }
      const item = this.cateList.find((item) => parseInt(item.num_id) === parseInt(this.detail.c1))
      if (item) {
        const subItem = item.children.find((item) => parseInt(item.num_id) === parseInt(this.detail.c2))
        if (subItem) {
          return item.name + '' + subItem.name
        }
        return item.name
      } else {
        return ''
      }
    },
    showKeywords() {
      if (!this.detail) {
        return
      }
      let key_words = []
      let new_marks = []
      if (this.detail.key_words) {
        key_words = this.detail.key_words.split(',')
      }
      if (this.detail.new_marks) {
        if (typeof this.detail.new_marks === 'string') {
          new_marks = JSON.parse(this.detail.new_marks)
        } else {
          new_marks = this.detail.new_marks
        }
        new_marks = new_marks.map((item) => item.name)
      }
      return [...key_words, ...new_marks]
    },
    showImages() {
      if (!this.detail) {
        return
      }
      return this.detail.images.split('|')
    },
    showCycle() {
      if (!this.detail || !this.cycleList) {
        return
      }
      const item = this.cycleList.find((item) => item.value === this.detail.cycle)
      if (item) {
        return item.label
      } else {
        return ''
      }
    },
  },
  activated() {
    this.$refs.table1.doLayout()
    this.$refs.table2.doLayout()
  },
  mounted() {
    this.queryId = this.$route.query.id
    this.getSelectList()
    this.getDataListOperation()
    this.getDataListView()
  },
  destroyed() {},
  methods: {
    // 获取下拉数据
    getSelectList() {
      this.$store.dispatch('select/getCateList').then((res) => {
        this.cateList = res
      })
      this.$store.dispatch('select/getCityList').then((res) => {
        this.areaList = res
        this.getDetail()
      })
      apiAssetBaseInfo().then((res) => {
        const { value } = res.data
        this.valuationList = value
      })
    },
    // 获取详情
    getDetail() {
      this.loading = true
      apiNoShareDetail({ id: this.queryId })
        .then((res) => {
          this.loading = false
          this.detail = res.data
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取数据列表
    getDataListOperation() {
      this.operation.dataListLoading = true
      let info = { pageNumber: this.operation.pageNumber, pageSize: this.operation.pageSize, id: this.queryId }
      apiNoShareRecordList(info)
        .then((res) => {
          const { data, total } = res
          this.operation.dataList = data
          this.operation.pageTotal = total
          this.operation.dataListLoading = false
          this.$refs.table1.doLayout()
        })
        .catch((e) => {
          this.operation.dataList = []
          this.operation.pageTotal = 0
          this.operation.dataListLoading = false
        })
    },
    // 获取数据列表
    getDataListView() {
      this.view.dataListLoading = true
      let info = { pageNumber: this.view.pageNumber, pageSize: this.view.pageSize, id: this.queryId }
      apiNoShareUserRecord(info)
        .then((res) => {
          const { data, total } = res
          data.forEach((item) => {
            item.tagList = []
            item.cityTagList = []
            if (!this.vipIdList.find((item1) => item1.id === item.vip_id)) {
              this.vipIdList.push({ id: item.vip_id, tagList: [], cityTagList: [] })
            }
          })
          this.view.dataList = data
          this.vipIdList.forEach((item) => {
            this.getTagList(item)
          })
          this.view.pageTotal = total
          this.view.dataListLoading = false
          this.$refs.table2.doLayout()
        })
        .catch((e) => {
          this.view.dataList = []
          this.view.pageTotal = 0
          this.view.dataListLoading = false
        })
    },
    getTagList(item) {
      apiCrmCustomerMarkList({ site_id: item.id }).then((res) => {
        if (res.data && res.data.length > 0) {
          let tags = res.data
          item.tagList = tags
          this.view.dataList.forEach((item1) => {
            if (item1.vip_id === item.id) {
              item1.tagList = tags
            }
          })
        }
      })
      apiCrmCustomerCityList({ site_id: item.id }).then((res) => {
        if (res.data && res.data.length > 0) {
          let tags = res.data
          item.cityTagList = tags
          this.view.dataList.forEach((item1) => {
            if (item1.vip_id === item.id) {
              item1.cityTagList = tags
            }
          })
          console.log(this.view.dataList)
        }
      })
    },
    // 每页数
    sizeChangeHandleOperation(val) {
      this.operation.pageSize = val
      this.operation.pageNumber = 1
      this.getDataListOperation()
    },
    // 当前页
    currentChangeHandleOperation(val) {
      this.operation.pageNumber = val
      this.getDataListOperation()
    },
    // 每页数
    sizeChangeHandleView(val) {
      this.view.pageSize = val
      this.view.pageNumber = 1
      this.getDataListView()
    },
    // 当前页
    currentChangeHandleView(val) {
      this.view.pageNumber = val
      this.getDataListView()
    },
    // 点击视频预览
    handleVideoClick() {
      var video = document.getElementById('Video')
      if (video.requestFullscreen) {
        video.requestFullscreen()
      } else if (video.mozRequestFullScreen) {
        /* Firefox */
        video.mozRequestFullScreen()
      } else if (video.webkitRequestFullscreen) {
        /* Chrome, Safari & Opera */
        video.webkitRequestFullscreen()
      } else if (video.msRequestFullscreen) {
        /* IE/Edge */
        video.msRequestFullscreen()
      }
    },
    getAddress(shengId, shiId, zoneId) {
      const shengItem = this.areaList.find((item) => item.code === shengId)
      if (shengItem) {
        const shiItem = shengItem.children.find((item) => item.code === shiId)
        if (shiItem) {
          const zoneItem = shiItem.children.find((item) => item.code === zoneId)
          if (zoneItem) {
            return `${shengItem.name}-${shiItem.name}-${zoneItem.name}`
          }
          return `${shengItem.name}-${shiItem.name}`
        }
        return `${shengItem.name}`
      } else {
        return ''
      }
    },
    // 关闭
    handleClose() {
      this.$bus.$emit('assetsPublicListUpdate')
      this.$bus.$emit('closeSelectedTag', this.$route)
    },
    // 编辑
    handleEdit() {
      this.$store.dispatch('permission/routeAuthorization', 'AlonePublish').then((res) => {
        window.open(`${location.origin}/#/assetsAlone/alonePublish?id=${this.queryId}`)
      })
    },
    // 公开
    handlePublic() {
      window.enterPreventDefault = false
      this.$confirm('确认将本条独享信息公开至Feijiu前台？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          window.enterPreventDefault = true
          apiNoSharePub({ id: this.queryId }).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            setTimeout(() => {
              this.handleClose()
            }, 1000)
          })
        })
        .catch(() => {
          window.enterPreventDefault = true
        })
    },
    // 未成交
    handleNotDeal() {
      window.enterPreventDefault = false
      this.$confirm('已与处置方核实未成交？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          window.enterPreventDefault = true
          apiNoShareDealConfirm({ id: this.queryId, sts: 1 }).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            setTimeout(() => {
              this.handleClose()
            }, 1000)
          })
        })
        .catch(() => {
          window.enterPreventDefault = true
        })
    },
    // 确认成交
    handleDeal() {
      this.showDialogDeal = true
    },
    // 确认成交成功
    handleDealSuccess() {
      this.showDialogDeal = false
      setTimeout(() => {
        this.handleClose()
      }, 1000)
    },
    // 联系方式
    getPhones() {
      let list = []
      if (this.detail.user_phone) {
        list.push(this.detail.user_phone)
      }
      if (this.detail.user_tel) {
        list.push(this.detail.user_tel)
      }
      if (this.detail.other_ways) {
        list.push(this.detail.other_ways)
      }
      return list.join('、')
    },
  },
}
</script>

<style scoped lang="scss">
@import url(~@/styles/tinymce.scss);
.page-content {
  padding-bottom: 50px;
}
.panel-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 40px;
  font-size: 14px;
  color: #606266;
  .label {
    width: 120px;
    text-align: right;
    vertical-align: middle;
    padding: 0 12px 0 0;
    font-weight: 700;
    flex-shrink: 0;
  }
}
.el-tag {
  margin-right: 10px;
}
.panel-bg {
  width: 100%;
  background: #f0f1f4;
  padding: 10px;
  border-radius: 4px;
  .sub-title {
    padding-left: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    line-height: 28px;
    margin-bottom: 10px;
    color: #333333;
    .desc {
      font-weight: 100;
      color: #999999;
      font-size: 12px;
    }
  }
}
.img,
.video-box {
  width: 148px;
  height: 148px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  margin: 0 8px 8px 0;
  position: relative;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}
.fixed-container {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(100% - 140px);
  padding: 0 10px;
  z-index: 100;
  .panel-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 6px;
    margin: 0;
  }
}

.el-tag {
  margin-bottom: 6px;
}
</style>
